<template>
  <div class="app-container">
    <div>
      <el-row>
        <el-col :span="10">
          <span style="font-size: 16px;line-height: 40px;color: #000;">
            <i class="el-icon-s-unfold"></i>
            导航列表</span>
        </el-col>
        <el-col :span="14" style="text-align: right;">
          <el-button @click="addBannersWay" icon="el-icon-circle-plus-outline" type="primary">添加导航</el-button>
          <el-button @click="getBannersListWay" icon="el-icon-refresh" type="success">刷新</el-button>
        </el-col>

      </el-row>
      <el-row style="margin-top: 30px">
        <el-table v-loading="loading" :header-cell-style="{
              'background-color': '#f3f8fe',
              color: '#606266',
              height: '50px',
            }" highlight-current-row :data="bannerList" style="width: 100%">
          <el-table-column align="center" prop="sort" label="导航排序">
          </el-table-column>
          <el-table-column align="center" prop="nav_name" label="导航名称">
          </el-table-column>
          <el-table-column align="center" prop="nav_icon" label="导航图标">
            <template slot-scope="scope">
              <div style="width: 40px; height: 40px; margin: 0 auto">
                <el-image :src="scope.row.nav_icon" :preview-src-list="[scope.row.nav_icon]" />
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="link_url" label="导航链接">
            <template slot-scope="scope">
              <span>
                {{ scope.row.link_url }}
              </span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="status" label="导航状态">
            <template slot-scope="scope">
              <span v-if="scope.row.status == 1" style="color: #13ce66;">开启</span>
              <span v-if="scope.row.status == 0" style="color: #f86d60;">关闭</span>
            </template>
          </el-table-column>
          <el-table-column align="center" fixed="right" width="150px" label="操作">
            <template slot-scope="scope">
              <el-button style="margin-right: 5px" type="text" size="mini" @click="puttagsWay(scope.row)">
                编辑
              </el-button>
              <el-popconfirm title="这是一段内容确定删除吗？" @confirm="deltagsWay(scope.row)">
                <el-button type="text" size="mini" slot="reference">
                  删除
                </el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
    </div>

    <el-drawer :modal-append-to-body="false" :append-to-body="true" title="导航设置" size="60%" :withHeader="false"
      :visible.sync="BannerDialog" @close="handleClose" :show-close="true">
      <div class="drawerTitle" style="margin-bottom: 30px;">
        <span>{{title}}</span>
        <div class="close" @click="handleClose">
          <i class="el-icon-close" style="font-size: 24px;"></i>
        </div>
      </div>
      <el-scrollbar wrap-style="overflow-x:hidden;" style="height: calc(100vh - 150px)">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"
          v-loading="addPutLoading" style="margin-left: 20px;">
          <el-row :gutter="0">
            <el-col :span="8">
              <el-form-item label="导航名称" prop="nav_name">
                <el-input maxlength="6" show-word-limit v-model="ruleForm.nav_name" placeholder="请输入名称"
                  clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="导航排序" prop="sort">
                <el-input maxlength="5" show-word-limit v-model="ruleForm.sort" placeholder="请输入排序"
                  clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="链接类型" prop="link_type">
                <el-select v-model="ruleForm.link_type" style="width: 100%" filterable reserve-keyword placeholder=""
                  :loading="selectLoading">
                  <el-option v-for="item in goodsList" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="导航状态" prop="status">
                 <el-radio-group v-model="ruleForm.status">
                    <el-radio :label="1">开启</el-radio>
                    <el-radio :label="0">关闭</el-radio>
                  </el-radio-group>
                   <!-- <el-radio v-model="ruleForm.status" label="1">开启</el-radio>
                    <el-radio v-model="ruleForm.status" label="2">关闭</el-radio> -->
              </el-form-item>
            </el-col>
            <el-col :span="18">
              <el-form-item label="导航链接" prop="link_url">
                <el-input v-model="ruleForm.link_url" placeholder="请输入路径/链接地址" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="18">
              <el-form-item label="导航图标" prop="nav_icon">
                <logo-upload :single-file="nav_icon" :show-file-list="false" accept="image/jpeg, image/png"
                  @uploadCallback="image_urlCallback" />
                <span style="color: #838383">仅支持.jpg、.png、.jpeg 格式，图标比例1：1,大小300k左右；</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-scrollbar>
      <div style="text-align: right;padding-right: 30px;">
        <el-button @click="BannerDialog = false">取 消</el-button>
        <el-button type="primary" @click="submitWay">确 定</el-button>
      </div>
    </el-drawer>

  </div>
</template>

<script>
  import {
    editBanners,
    addBanners,
    delBanners,
    getBannersList,
  } from "@/api/admin/diamond";
  import LogoUpload from "@/components/FileUpload";
  export default {
    components: {
      LogoUpload,
    },
    data() {
      return {
        goodsList: [{
            name: '页面路径',
            id: 1
          },
          {
            name: '外部链接',
            id: 2
          }
        ],
        loading: false,
        title: "添加导航",
      bannerList: [],

        ruleForm: {
          status:1,
          link_type: 1,
          nav_name: "",
          nav_icon: "",
          link_url: "",
          sort: '',
        },
        nav_icon: {},
        selectLoading: false,
        addPutLoading: false,
        rules: {
          nav_name: [{
            required: true,
            validator: (rule, value, callback) => {
              const req = /[^0-9a-zA-Z\u4e00-\u9fa5]/g;
              if (!value) {
                return callback(new Error("请输入名称"));
              } else {
                if (req.test(value)) {
                  return callback(new Error("名称中不能包含特殊字符"));
                } else {
                  callback();
                }
              }
            },
            trigger: "change",
          }, ],
          sort: [{
            required: true,
            validator: (rule, value, callback) => {
              const req = /[^0-9]/g;
              if (!value) {
                return callback(new Error("请输入排序"));
              } else {
                if (req.test(value)) {
                  return callback(new Error("排序必须是数字且只能为整数"));
                } else {
                  callback();
                }
              }
            },
            trigger: "change",
          }, ],
          status: [{
            required: true,
            validator: (rule, value, callback) => {
              if (value === "") {
                return callback(new Error("请选择状态"));
              } else {
                callback();
              }
            },
            trigger: "change",
          }, ],
          link_type: [{
            required: true,
            validator: (rule, value, callback) => {
              if (value === "") {
                return callback(new Error("请选择链接类型"));
              } else {
                callback();
              }
            },
            trigger: "change",
          }, ],
          link_url: [{
            required: true,
            validator: (rule, value, callback) => {
              if (value === "") {
                return callback(new Error("请输入链接/路径"));
              } else {
                callback();
              }
            },
            trigger: "change",
          }, ],
          nav_icon: [{
            required: true,
            validator: (rule, value, callback) => {
              if (this.ruleForm.nav_icon === "") {
                return callback(new Error("请上传图标"));
              } else {
                callback();
              }
            },
            trigger: "change",
          }, ],
        },
        BannerDialog: false,

    };
  },
  created() {
      this.getBannersListWay();
    },
    methods: {
      getBannersListWay() {
        var _this = this;
        this.loading = true;
        getBannersList().then((res) => {
          if (res.code !== 200) {
            this.loading = false;
            return this.$messages.error(res.msg);
          }
          this.bannerList = res.data;
          this.loading = false;
        });
      },
      addBannersWay() {
        this.title = "添加导航";
        this.BannerDialog = true;
      },
      submitWay() {
        this.$refs.ruleForm.validate((valid, err) => {
          if (valid) {
            this.addPutLoading = true;
            if (this.ruleForm.id) {
              addBanners(this.ruleForm).then((res) => {
                if (res.code !== 200) {
                  return this.$messages.error(res.msg);
                }
                this.handleClose();
                this.$messages.success(res.msg);
                this.addPutLoading = false;
                this.BannerDialog = false;
                this.getBannersListWay();
              });
            } else {
              addBanners(this.ruleForm).then((res) => {
                if (res.code !== 200) {
                  return this.$messages.error(res.msg);
                }
                this.handleClose();
                this.$messages.success(res.msg);
                this.addPutLoading = false;
                this.BannerDialog = false;
                this.getBannersListWay();
              });
            }
          } else {
            return false;
          }
        });
      },
      handleClose() {
        this.ruleForm = {
          status:1,
          link_type: 1,
          nav_name: "",
          nav_icon: "",
          link_url: "",
          sort: '',
        };
        this.$refs.ruleForm.resetFields();
        this.nav_icon = {};
        this.BannerDialog = false
      },
      deltagsWay(row) {
        this.loading = true;
        delBanners({
          id: row.id
        }).then((res) => {
          if (res.code == 200) {
            this.$messages.success("删除成功");
            this.getBannersListWay();
          } else {
            this.$messages.error(res.msg);
          }
        });
      },
      // 修改
      puttagsWay(row) {
        this.title = "修改导航";
        this.BannerDialog = true;
        this.addPutLoading = true;
          this.ruleForm = JSON.parse(JSON.stringify(row));
          this.nav_icon = {
            url: this.ruleForm.nav_icon,
          };
          this.addPutLoading = false;

      },
      image_urlCallback(file) {
        this.nav_icon = file;
        this.ruleForm.nav_icon = file.url;
      },
    },
  };
</script>

<style lang="scss" scoped>
</style>
